<template>
  <div>
    <div style="background-color: #FFFFFF; margin-top: 80px;">
      <p style="font-size: 18px; font-weight: bold; color: #333;">当前搜索：--- “{{ searchToName }}”</p>
      <br/>

      <div class="recommendation-items">
        <table style="width: 100%; border-collapse: collapse;">
          <tr style="background-color: #f5f5f5; font-weight: bold;">
            <button width="180" style="margin-left: 120px" @click="sort('publisher_date')">
              鲜花上架时间
              <span v-if="sortProperty === 'publisher_date' && sortOrder === 'asc'">升序</span>
              <span v-if="sortProperty === 'publisher_date' && sortOrder === 'desc'">降序</span>
            </button>
            <button width="180" style="margin-left: 150px" @click="sort('flower_price')">
              鲜花价格
              <span v-if="sortProperty === 'flower_price' && sortOrder === 'asc'">升序</span>
              <span v-if="sortProperty === 'flower_price' && sortOrder === 'desc'">降序</span>
            </button>
            <button width="180" style="margin-left: 150px" @click="sort('flower_store_count')">
              鲜花库存
              <span v-if="sortProperty === 'flower_store_count' && sortOrder === 'asc'">升序</span>
              <span v-if="sortProperty === 'flower_store_count' && sortOrder === 'desc'">降序</span>
            </button>
            <button width="180" style="margin-left: 150px" @click="sort('flower_sale_count')">
              鲜花售出数量
              <span v-if="sortProperty === 'flower_sale_count' && sortOrder === 'asc'">升序</span>
              <span v-if="sortProperty === 'flower_sale_count' && sortOrder === 'desc'">降序</span>
            </button>
            <button width="180" style="margin-left: 150px" @click="sort('flower_collection_count')">
              鲜花收藏数量
              <span v-if="sortProperty === 'flower_collection_count' && sortOrder === 'asc'">升序</span>
              <span v-if="sortProperty === 'flower_collection_count' && sortOrder === 'desc'">降序</span>
            </button>
          </tr>
        </table>
        <div v-for="(item, index) in productsTest" :key="index" class="item"
             style="margin-top: 100px;">
          <div class="item-image-container padding: 10px;">
            <img :src="'http://localhost:8088/image' + item.flowerImg" class="custom-image"
                 @click="selectProduct(item.flowerId)"/>
          </div>
          <div class="item-name" style="font-size: 16px; margin-top: 10px;">
            <span @click="selectProduct(item.flowerId)">{{ item.flowerName }}</span>
          </div>
          <div class="item-description" style="font-size: 14px; color: #777; margin-top: 5px;">
            <span>{{ item.introduction }}</span>
          </div>
          <div class="item-price" style="font-size: 18px; color: #FF6E90;">
            <span>￥{{ item.flowerPrice }}</span>
          </div>
          <div class="div-to-cart">
            <button class="add-to-cart" style="background-color: #FF6E90; color: #fff; border-radius: 5px;"  @click="selectProduct(item.flowerId)">
              <span>查看详情</span>
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[4, 8, 16]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalItems" style="position: relative;left: 280px;bottom: 100px">
      </el-pagination>
    </div>

    <br/><br/><br/><br/><br/><br/>
  </div>
</template>

<script>

import {Message} from "element-ui";

export default {
  name: "ProductView",
  data() {
    return {
      productsTest: [],
      tableData: [],
      searchToName: '',
      sortProperty: '',
      sortOrder: 'asc',
      currentPage: 1,  // 当前页码
      pageSize: 8,  // 每页显示的条数
      totalItems: 0  // 总条数
    }
  },
  methods: {
    queryFlowerName(searchToName) {
      if (searchToName != null && searchToName != '') { // 新增空字符串判断
        let url = `/selectFlowerInfoName/${searchToName}`;
        this.$axios.get(url)
            .then(res => {
              if (res.data.code === 200) {
                this.productsTest = res.data.data;
                this.totalItems = res.data.data.length;
              }
            })
        this.searchToName = searchToName;
      } else {
        Message({
          message: '搜索内容不能为空',
          type: 'warning'
        })
      }
    },
    queryFlowerNameToPage() {
      if (this.searchToName != null) {
        const formData = {
          searchName: this.searchToName,
          pageNum: this.currentPage,  // 发送当前页码
          pageSize: this.pageSize  // 发送每页条数
        }
        let url = "/selectFlowerInfoNameToPage";
        this.$axios.post(url, formData)
            .then(res => {
              if (res.data.code === 200) {
                this.productsTest = res.data.data;
              }
            })
      } else {
        console.log("sessionStorage is null");
      }
    },
    sort(property) {
      if (property === this.sortProperty) {
        this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
      } else {
        this.sortProperty = property;
        this.sortOrder = 'asc';
      }
      const formData = {
        searchName: this.searchToName,
        sortProperty: property,
        sortOrder: this.sortOrder,
        // pageNum: this.currentPage,  // 发送当前页码
        // pageSize: this.pageSize  // 发送每页条数
      }
      // console.log(formData)
      let url = "/sort/sortFlowerInfo";
      this.$axios.post(url, formData)
          .then(res => {
            if (res.data.code === 200) {
              this.productsTest = res.data.data;
              // this.totalItems = res.data.data.length;
            } else {
              Message({
                type: "error",
                message: res.data.msg,
                duration: 1000
              })
            }
          })
          .catch(error => {
            console.log(error);
          })
    },
    handleSizeChange(val) {  // 每页条数改变时触发
      this.pageSize = val;
      this.queryFlowerNameToPage();
    },
    handleCurrentChange(val) {  // 当前页码改变时触发
      this.currentPage = val;
      this.queryFlowerNameToPage();
    },
    selectProduct(flowerId) {
      sessionStorage.setItem("flowerId", flowerId);
      this.$router.push({path: '/flower'});
    },
  },
  created() {
    let searchToName = sessionStorage.getItem("searchToName");
    this.queryFlowerName(searchToName);
  }
}
</script>

<style scoped>

.custom-image {
  width: 300px;
  height: 300px;
}

.recommendation-items {
  width: 1320px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding-bottom: 200px;
}

.item {
  width: 315px;
  height: 400px;
  margin-bottom: 20px;
}

.item-image-container {
  width: 315px;
  border-radius: 5px;
}

.item-name {
  width: 315px;
  height: 50px;
  font-size: 18px;
}

.item-description {
  width: 315px;
  height: 40px;
  font-size: 13px;
}

.item-price {
  width: 315px;
  height: 25px;
  font-size: 25px;
  color: #FF6E90;
}

.add-to-cart {
  width: 120px;
  height: 35px;
  border: none;
  box-shadow: none;
}

.div-to-cart {
  position: relative;
  margin-left: 160px;
  color: #ff6e90;
}
</style>